<template>
    <div>
        <button 
        v-for="item in tabs" 
        :key="item"
        :class="{active: currentTab === item}"
        @click="itemClick(item)"
        >
            {{item}}
        </button>

        <!-- 1. v-if -->
        <!-- <template v-if="currentTab == 'home'">
            <home></home>
        </template>
        <template v-else-if="currentTab == 'about'">
            <about></about>
        </template>
        <template v-else>
            <category></category>
        </template> -->

        <!-- 2. 动态组件-->
        <!-- <component :is="currentTab"></component> -->

        <!-- 动态组件传送参数 -->
        <!-- <component 
        :is="currentTab"
        name="yzh"
        :age="18"
        @pageChange="pageChange"
        >
        </component> -->

    <!-- include="about" 只有name匹配到的组件才会被缓存 多个 使用逗号分割 -->
        <keep-alive include="about">
            <component 
            :is="currentTab"
            name="yzh"
            :age="18"
            @pageChange="pageChange"
            >
            </component>
        </keep-alive>

    </div>
</template>
<script>
    import Home from './pages/home.vue'
    import About from './pages/about.vue'
    import Category from './pages/category.vue'
export default {
    components: {
        Home,
        About,
        Category
    },
    data() {
       return {
           tabs: ["home", "about", "category"],
           currentTab: "home"
       }
    },
    created() {},
    methods: {
        itemClick(item) {
            this.currentTab = item;
        },
        pageChange(val) {
            console.log('接收事件--参数：', val)
        }
    },
}
</script>
<style>
.active {
    background: cornflowerblue;
}
</style>
